<template>
    <div class="details-wrap">
        <NavTabs :tabs="tabs" :on-change="handleTabs" />
        <div class="time-wrap">
            <div class="left-wrap">
                <uni-datetime-picker
                    v-model="datetimerange"
                    :clear-icon="false"
                    type="daterange"
                    @maskClick="handleClick"
                />
            </div>
            <div class="icon-wrap">
                <image class="icon" :src="IconSearch" mode="scaleToFill" />
            </div>
        </div>
        <div class="content-wrap">
            <div class="card-box">
                <div class="card-left">
                    <div class="name-card">订单支出</div>
                    <div class="order">订单号:<span class="number">12222222</span></div>
                    <div class="time-expenditure">收支时间</div>
                </div>
                <div class="jifen-box">
                    + <image class="icon" :src="JifenIcon" mode="scaleToFill" />
                    <span class="total-text">200积分</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { defineExpose, ref } from 'vue'
import NavTabs from '@/components/nav-tabs/index.vue'
import IconSearch from '@/assets/mine/serach.png'
import JifenIcon from '@/assets/mine/jifen.png'

interface ITabs {
    id: Number
    name: string
}
const tabs: ITabs[] = [
    { id: 0, name: '全部' },
    { id: 1, name: '收入' },
    { id: 2, name: '支出' }
]
const datetimerange = ref<any | string[]>([])
const handleTabs = (item: ITabs) => {
    console.log('item===>', item)
}

// 暴露函数给子组件
defineExpose({
    handleTabs
})
// 选择日期
const handleClick = (e: any) => {
    console.log('e', e)
}
</script>
<style scoped lang="scss">
.details-wrap {
    width: 100%;
    min-height: 100vh;
    background: #eee;

    .left-wrap {
        width: 90%;
    }
    .time-wrap {
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
        height: 38px;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        .icon-wrap {
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            .icon {
                width: 24px;

                height: 24px;
            }
        }
    }
    .content-wrap {
        padding: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        background: #fff;
        margin-top: 10px;
        .card-box {
            display: flex;
            justify-content: space-between;
            .card-left {
                .name-card {
                    font-size: 14px;
                    color: #333;
                }
                .order {
                    margin-top: 5px;
                    font-size: 12px;
                    .number {
                        color: rgba(0, 153, 255, 1);
                    }
                }
                .time-expenditure {
                    margin-top: 5px;
                    font-size: 12px;
                }
            }
            .jifen-box {
                // width: 80px;
                height: 40px;
                display: flex;
                align-items: center;

                align-items: center;
                .icon {
                    width: 24px;
                    height: 24px;
                }
                .total-text {
                    text-align: right;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>
